import {
  getFilmInfoApi
} from '@/api/filmApi'

// 缓存电影详情的数量
const limits = 10;

export default {
  state: {
    // 电影id 起到标识作用
    filmid: 0,
    // 电影详情 最多能存储3
    // filminfos: {'id号':{}}
    // 此队列就是为了缓存指定的电影数量
    filminfoList: [],
    // 缓存数据集合  它是一个对象 如果你没有改变它的引用地址，不会触发视图更新
    filminfos: {}
  },
  mutations: {
    // 设置电影id
    setFilmId(state, filmid) {
      state.filmid = filmid * 1
    },
    // 电影详情
    setFilmInfo(state, payload = null) {
      // 队列中数据的缓存处理
      if (state.filminfoList.length > limits) {
        // 清除最早插入队列中的电影数据
        let id = state.filminfoList.pop()
        delete state.filminfos[id]
      }
      // 添加
      if (!state.filminfoList.includes(payload.filmId)) {
        state.filminfoList.unshift(payload.filmId)
        // 引用类型一定要给它把引用地址改变   ---  vuex太好，作用给你解决很多需要深拷贝问题
        state.filminfos = { ...state.filminfos, [payload.filmId]: payload }
      }
    }
  },
  // 在此处写ajax
  actions: {
    getFilmInfo({ commit, state }, filmId) {
      if (!state.filminfoList.includes(+filmId)) { // 减少ajax请求次数
        // ajax请求
        getFilmInfoApi(filmId).then(ret => {
          commit('setFilmInfo', ret.data.film)
        })
      }
    }
  }
}